<template>
    <view class="app">
        <view class="app-container">
            <view class="solid-bottom margin-bottom">
                <textarea placeholder-class="text-gray text-normal"  maxlength="-1" v-model="comment" placeholder="请填写10字以上的问题描述以使我们提供更好的帮助..."></textarea>
            </view>
            <view class="action margin-bottom">
                图片上传（{{imgList.length}}/6）
            </view>
            <div class="margin-bottom">
                <div class="grid col-4 grid-square flex-sub">
                    <div class="bg-img" v-for="(img, index) in imgList" :key="index" @click="viewImage" :data-url="img">
                        <image :src="img" :webp="true" mode="aspectFill"></image>
                        <view class="cu-tag bg-red" @tap.stop="delImg" :data-index="index">
                            <text class="cuIcon-close"></text>
                        </view>
                    </div>
                    <view class="solids" @tap.stop="chooseImage" v-if="imgList.length < 6">
                        <text class="cuIcon-cameraadd"></text>
                    </view>
                </div>
            </div>
            <div class="fixed-bottom" :class="{'isIphoneX-class': isIphoneX}" @tap="confirm">
                <button class="cu-btn block box-shadow bg-primary margin-tb-sm lg">提交反馈</button>
            </div>
        </view>
    </view>
</template>

<script>
    import {mapGetters} from 'vuex'
	import {addMalfunctionInfo} from '@/api/common.js'
	import { VUE_APP_BASE_API } from '@/common/tools/config.js';
	
    export default {
        name: "feedbackDetail",
        data() {
            return {
                imgList: [],
				comment: '',
				orderId: '',
				type: '' 
            } 
        },
        computed: {
            ...mapGetters(['isIphoneX', 'token']),
        },
        onLoad(options) {
            this.orderId = options.orderId
            this.type = Number(options.type) || 1
        },
        methods: {
            viewImage(e) {
                console.error(e)
                wx.previewImage({
                    urls: this.imgList,
                    current: e.detail.url
                });
            },
            delImg() {
                wx.showModal({
                    title: '警告',
                    content: '确定要删除这张图片吗？',
                    cancelText: '取消',
                    confirmText: '确定',
                    success: res => {
                        if (res.confirm) {
                            this.imgList.splice(e.$wx.currentTarget.dataset.index, 1);
                        }
                    }
                })
            },
            chooseImage() {
                wx.chooseImage({
                    count: 6,
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: (res) => {
                        if (this.imgList.length !== 0) {
                            this.imgList = this.imgList.concat(res.tempFilePaths)
                        } else {
                            this.imgList = res.tempFilePaths
                        }
                    }
                });
            },
            confirm() {
                // if (this.imgList.length <= 0) {
                //     wx.showToast({
                //         title: '请至少选择一张图片分享出来噢( ´•̥×•̥` )',
                //         icon: 'warn',
                //         duration: 2000
                //     });
                //     return false
                // }
                const imgArr = this.imgList.map( path => {
                    console.log(path);
                    return new Promise((resolve, reject) => {
                        uni.uploadFile({
                            url: VUE_APP_BASE_API + '/applet/Upload/uploadWechatImage',
                            header: {
                            	'X-Token': this.token,
                            	'content-type': 'multipart/form-data'
                            },
							formData: {
								pic_folder: 'feedback-img'
							},
                            name: 'file',
                            filePath: path,
                            success (res){
                                const data = JSON.parse(res.data);
                                resolve(data.result)
                            }
                        })
                    })
                });
                Promise.all(imgArr).then(imgArr => {
                    addMalfunctionInfo({
                        print_order_id: this.type === 2 ? this.orderId : '',
                        demand_order_id : this.type === 3 ? this.orderId : '',
                        type: this.type,
                        path: imgArr,
                        describe: this.comment,
                    }).then(res => {
                        wx.navigateBack({
							success() {
								wx.showToast({
								    title: '反馈成功',
								    icon: 'success',
								    duration: 2000
								});
							}
						})
                    });
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    textarea {
        width: 100%;
        background: #f8f8f8;
        padding: 16px;
        border-radius: 5px;
    }
    .app-container {
        position: relative;
    }
    .fixed-bottom{
       position: absolute;
       bottom: 36px;
       width: 100%;
       height: auto;
       left: 16px;
       right: 16px;
       display: block;
    }
</style>
